/* 字体 */
@font-face {
  font-family:"zhuhui";
  src: url(../../assets/family/AGENCYB.TTF);
}
.zhuhui {
  font-family:zhuhui; 
}

/* 布局 */
.flex{
    display: flex;
    align-items: center;
}
.flexis{
    display: flex;
}
.space-between{
    justify-content: space-between;
}
.row-reverse{
  flex-direction: row-reverse;
}
.space-around{
    justify-content:space-around;
}
.space-center{
    justify-content:center;
}
.align-content-between{
  align-content: space-between;
}

.content-box{
  box-sizing: content-box;
}
.border-box{
  box-sizing: border-box;
}
.flex-wrap{
  flex-wrap: wrap;
}

.padding-box{
    padding:10px 20px;
    box-sizing: border-box;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content{
    /* background:var(--ran-content-bg); */
	background:#FFF;
    box-sizing: border-box;
	min-height: calc( 100vh - 80px - 64px - 12px);
	box-sizing: border-box;
	padding:10px;
}

.background{
	background:#FFF;
	border-color:#ccc;
}
.custom-dark .background{
	background:#1f1f1f;
	color:#FFF;
	border-color:#3030;
}
.custom-dark .content{
	background:#1f1f1f;
}






.content2{
    box-sizing: border-box;
}
.margin-top{
    margin-top:20px;
}
.margin-bottom{
    margin-bottom:20px;
}


/* 功能 */
.pointer{
    cursor: pointer;
}
.el-tag{
    cursor: pointer;
}
.el-button{
    cursor: pointer;
}
.el-tag+.el-tag{
    margin-left:10px;
    
}
.el-link__inner{
    width: 30px;
}



/*#region [scrollbar 滚动条]*/
.scrollBox{
	/* padding-right:2px; */
}
.scrollBox:hover{
	/* padding-right:0px; */
	overflow-y: overlay;
	/* overflow-y: auto; */
}   

.scrollBox::-webkit-scrollbar {
	/*滚动条整体样式*/
	width: 2px;
	/*高宽分别对应横竖滚动条的尺寸*/
	height: 1px;
}

.scrollBox::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius: 10px;
	background-color: skyblue;
	background-image: val(--a-color-primary-light-7);
}

.scrollBox::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	background: #ededed;
	border-radius: 10px;
}

body:hover{
	/* overflow-y: overlay; */
}   

body::-webkit-scrollbar {

	width: 2px;
	/*高宽分别对应横竖滚动条的尺寸*/
	height: 1px;
}

body::-webkit-scrollbar-thumb {

	border-radius: 10px;
	background-color: skyblue;
	background-image: val(--a-color-primary-light-7);
}

body::-webkit-scrollbar-track {

	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	background: #ededed;
	border-radius: 10px;
}
.custom-dark  .scrollBox::-webkit-scrollbar-track {
	background:#303030;
}

/*#endregion */
/*#region [浅色背景]*/

.bg-red.light {
	color: #e54d42;
	background-color: #fadbd9;
}

.bg-orange.light {
	color: #f37b1d;
	background-color: #fde6d2;
}

.bg-yellow.light {
	color: #fbbd08;
	background-color: #fef2ced2;
}

.bg-olive.light {
	color: #8dc63f;
	background-color: #e8f4d9;
}

.bg-green.light {
	color: #39b54a;
	background-color: #d7f0dbff;
}

.bg-cyan.light {
	color: #1cbbb4;
	background-color: #d2f1f0;
}

.bg-blue.light {
	color: #0081ff;
	background-color: #cce6ff;
}

.bg-purple.light {
	color: #6739b6;
	background-color: #e1d7f0;
}

.bg-mauve.light {
	color: #9c26b0;
	background-color: #ebd4ef;
}

.bg-pink.light {
	color: #e03997;
	background-color: #f9d7ea;
}

.bg-brown.light {
	color: #a5673f;
	background-color: #ede1d9;
}

.bg-grey.light {
	color: #8799a3;
	background-color: #e7ebed;
}
/*#endregion*/

/*#region [色彩]*/
.red {
	color: #e54d42;
}

.orange {
	color: #f37b1d;
}

.yellow {
	color: #fbbd08;
}

.olive {
	color: #8dc63f;
}

.green {
  color: #39b54a;
}

.cyan {
	color: #1cbbb4;
}

.blue {
	color: #0081ff;
}

.purple {
	color: #6739b6;
}

.mauve {
	color: #9c26b0;
}

.pink {
	color: #e03997;
}

.brown {
	color: #a5673f;

}

.bg-grey {
	background-color: #8799a3;
	color: #ffffff;
}

.black {
	color: #333333;
}

.white {
	color: #ffffff;
}
/*#endregion*/

/*#region [深色背景色]*/
.bg-red {
	background-color: #e54d42;
	color: #ffffff;
}

.bg-orange {
	background-color: #f37b1d;
	color: #ffffff;
}

.bg-yellow {
	background-color: #fbbd08;
	color: #333333;
}

.bg-olive {
	background-color: #8dc63f;
	color: #ffffff;
}

.bg-green {
	background-color: #39b54a;
	color: #ffffff;
}

.bg-cyan {
	background-color: #1cbbb4;
	color: #ffffff;
}

.bg-blue {
	background-color: #0081ff;
	color: #ffffff;
}

.bg-purple {
	background-color: #6739b6;
	color: #ffffff;
}

.bg-mauve {
	background-color: #9c26b0;
	color: #ffffff;
}

.bg-pink {
	background-color: #e03997;
	color: #ffffff;
}

.bg-brown {
	background-color: #a5673f;
	color: #ffffff;
}

.bg-grey {
	background-color: #8799a3;
	color: #ffffff;
}

.bg-gray {
	background-color: #f0f0f0;
	color: #333333;
}

.bg-black {
	background-color: #333333;
	color: #ffffff;
}

.bg-white {
	background-color: #ffffff;
	color: #666666;
}
	/*#endregion*/

/*#region [渐变色]*/


.bg-gradual-red {
	background-image: linear-gradient(45deg, #f43f3b, #ec008c);
	color: #ffffff;
}

.bg-gradual-orange {
	background-image: linear-gradient(45deg, #ff9700, #ed1c24);
	color: #ffffff;
}

.bg-gradual-green {
	background-image: linear-gradient(45deg, #39b54a, #8dc63f);
	color: #ffffff;
}

.bg-gradual-purple {
	background-image: linear-gradient(45deg, #9000ff, #5e00ff);
	color: #ffffff;
}

.bg-gradual-pink {
	background-image: linear-gradient(45deg, #ec008c, #6739b6);
	color: #ffffff;
}

.bg-gradual-blue {
	background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
	color: #ffffff;
}
/*#endregion*/

/*#region [内外边距]*/
.margin-0 {
	margin: 0;
}

.margin-1x {
	margin: 10px;
}

.margin-2x {
	margin: 20px;
}

.margin-3x {
	margin: 30px;
}

.margin-4x {
	margin: 40px;
}

.margin-5x {
	margin: 50px;
}

.margin-top-1x {
	margin-top: 10px;
}

.margin-top-2x {
	margin-top: 20px;
}

.margin-top-3x {
	margin-top: 30px;
}

.margin-top-4x {
	margin-top: 40px;
}

.margin-top-5x {
	margin-top: 50px;
}

.margin-right-1x {
	margin-right: 10px;
}

.margin-right-2x {
	margin-right: 20px;
}

.margin-right-3x {
	margin-right: 30px;
}

.margin-right-4x {
	margin-right: 40px;
}

.margin-right-5x {
	margin-right: 50px;
}

.margin-bottom-1x {
	margin-bottom: 10px;
}

.margin-bottom-2x {
	margin-bottom: 20px;
}

.margin-bottom-3x {
	margin-bottom: 30px;
}

.margin-bottom-4x {
	margin-bottom: 40px;
}

.margin-bottom-5x {
	margin-bottom: 50px;
}

.margin-left-1x {
	margin-left: 10px;
}

.margin-left-2x {
	margin-left: 20px;
}

.margin-left-3x {
	margin-left: 30px;
}

.margin-left-4x {
	margin-left: 40px;
}

.margin-left-5x {
	margin-left: 50px;
}

.margin-lr-1x {
	margin-left: 10px;
	margin-right: 10px;
}

.margin-lr-2x {
	margin-left: 20px;
	margin-right: 20px;
}

.margin-lr-3x {
	margin-left: 30px;
	margin-right: 30px;
}

.margin-lr-4x {
	margin-left: 40px;
	margin-right: 40px;
}

.margin-lr-5x {
	margin-left: 50px;
	margin-right: 50px;
}

.margin-tb-1x {
	margin-top: 10px;
	margin-bottom: 10px;
}

.margin-tb-2x {
	margin-top: 20px;
	margin-bottom: 20px;
}

.margin-tb-3x {
	margin-top: 30px;
	margin-bottom: 30px;
}

.margin-tb-4x {
	margin-top: 40px;
	margin-bottom: 40px;
}

.margin-tb-5x {
	margin-top: 50px;
	margin-bottom: 50px;
}

.padding-0 {
	padding: 0;
}

.padding-1x {
	padding: 10px;
}

.padding-2x {
	padding: 20px;
}

.padding-3x {
	padding: 30px;
}

.padding-4x {
	padding: 40px;
}

.padding-5x {
	padding: 50px;
}

.padding-top-1x {
	padding-top: 10px;
}

.padding-top-2x {
	padding-top: 20px;
}

.padding-top-3x {
	padding-top: 30px;
}

.padding-top-4x {
	padding-top: 40px;
}

.padding-top-5x {
	padding-top: 50px;
}

.padding-right-1x {
	padding-right: 10px;
}

.padding-right-2x {
	padding-right: 20px;
}

.padding-right-3x {
	padding-right: 30px;
}

.padding-right-4x {
	padding-right: 40px;
}

.padding-right-5x {
	padding-right: 50px;
}

.padding-bottom-1x {
	padding-bottom: 10px;
}

.padding-bottom-2x {
	padding-bottom: 20px;
}

.padding-bottom-3x {
	padding-bottom: 30px;
}

.padding-bottom-4x {
	padding-bottom: 40px;
}

.padding-bottom-5x {
	padding-bottom: 50px;
}

.padding-left-1x {
	padding-left: 10px;
}

.padding-left-2x {
	padding-left: 20px;
}

.padding-left-3x {
	padding-left: 30px;
}

.padding-left-4x {
	padding-left: 40px;
}

.padding-left-5x {
	padding-left: 50px;
}

.padding-lr-1x {
	padding-left: 10px;
	padding-right: 10px;
}

.padding-lr-2x {
	padding-left: 20px;
	padding-right: 20px;
}

.padding-lr-3x {
	padding-left: 30px;
	padding-right: 30px;
}

.padding-lr-4x {
	padding-left: 40px;
	padding-right: 40px;
}

.padding-lr-5x {
	padding-left: 50px;
	padding-right: 50px;
}

.padding-tb-1x {
	padding-top: 10px;
	padding-bottom: 10px;
}

.padding-tb-2x {
	padding-top: 20px;
	padding-bottom: 20px;
}

.padding-tb-3x {
	padding-top: 30px;
	padding-bottom: 30px;
}

.padding-tb-4x {
	padding-top: 40px;
	padding-bottom: 40px;
}

.padding-tb-5x {
	padding-top: 50px;
	padding-bottom: 50px;
}
	/*#endregion*/


 /*#region [iconfont]*/ 
  .icon-1x {
    width: 10px;
    height: 10px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  .icon-2x {
    width: 15px;
    height: 15px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  .icon-3x {
    width: 20px;
    height: 20px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  .icon-4x {
    width: 25px;
    height: 25px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  .icon-5x {
    width: 30px;
    height: 30px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
/*#endregion*/


/*#region [线条]*/

.text-red,
.line-red,
.lines-red {
	color: #e54d42;
}
.text-orange,
.line-orange,
.lines-orange {
	color: #f37b1d;
}
.text-yellow,
.line-yellow,
.lines-yellow {
	color: #fbbd08;
}
.text-olive,
.line-olive,
.lines-olive {
	color: #8dc63f;
}
.text-green,
.line-green,
.lines-green {
	color: #39b54a;
}
.text-cyan,
.line-cyan,
.lines-cyan {
	color: #1cbbb4;
}
.text-blue,
.line-blue,
.lines-blue {
	color: #0081ff;
}
.text-purple,
.line-purple,
.lines-purple {
	color: #6739b6;
}
.text-mauve,
.line-mauve,
.lines-mauve {
	color: #9c26b0;
}
.text-pink,
.line-pink,
.lines-pink {
	color: #e03997;
}
.text-brown,
.line-brown,
.lines-brown {
	color: #a5673f;
}
.text-grey,
.line-grey,
.lines-grey {
	color: #8799a3;
}
.text-gray,
.line-gray,
.lines-gray {
	color: #aaaaaa;
}
.text-black,
.line-black,
.lines-black {
	color: #333333;
}
.text-white,
.line-white,
.lines-white {
	color: #ffffff;
}

/*#endregion*/



/*#region [线条]*/

/*#endregion*/


/*#region [线条]*/
/*#endregion*/


/*#region [线条]*/
/*#endregion*/



